<template>
  <div class="wrapper">
    <div class="form">
      <div class="item">
        <span>加盟商用户名</span>
        <input type="text" v-model="manager_username" placeholder="分配的加盟商用户名">
      </div>
    </div>
    <button class="submit" @click="submit">提交</button>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { mapState } from'vuex'
  export default {
    name: 'MerchantAdd',
    data() {
      return {
        manager_username: ''
      }
    },
    computed: {
      ...mapState(['openId'])
    },
    methods: {
      submit() {
        if(!this.manager_username) {
          this.$toast('请输入加盟商用户名')
          return
        }

        this._submit()
      },
      _submit: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/platform/card',
          method: 'POST',
          data: {
            manager_username: this.manager_username,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.$toast(data)
          this.getUserInfo()
        }
      }, 2000, { trailing: false }),
      async getUserInfo() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/userinfo',
          method: 'GET',
          params: {
            openid: this.openId
          }
        })
        if(code === 0) {
          localStorage.setItem('userState', data.userinfo.state)
          this.$store.commit('userState', localStorage.getItem('userState'))
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height:100vh;
    padding-top: 0.2rem;
    background: #eee;
  }
  .form {
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
  }
  .item {
    display: flex;
    align-items: center;
    /* padding: 0.2rem 0; */
    border-bottom: 1px solid $bgGray;
    span {
      display: block;
      flex: 0 0 1.6rem;
      width: 1.6rem;
      margin-right: 0.4rem;
    }
    input {
      flex: 1;
      display: block;
      font-size: 0.24rem;
      line-height: 0.8rem;
    }
  }
  .submit {
    display: block;
    margin: 0.4rem auto;
    padding: 0.2rem;
    width: 80%;
    border-radius: 5px;
    border:none;
    color: #fff;
    background: $colorRed;
    font-size: 0.28rem;
  }
</style>
